<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>popup弹出框</title>
    <!-- 加载弹窗样式 -->
    <link rel="stylesheet" type="text/css" href="css/OLPopup.css" >
    <script type='text/javascript' src='../../lib/jquery/3.6.0/jquery-3.6.0.min.js'></script>

    <link rel="stylesheet" type="text/css" href="../../lib/openLayers/4.6.5/ol.css" >
    <script type="text/javascript" src="../../lib/openLayers/4.6.5/ol.js"></script>
    <style>
        html, body, #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <!--<div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        <div id="popup-content"></div>
    </div>-->
    <script>
        function popupOpen(map){
            $('body').append(`<div id="popup" class="ol-popup">
                <a href="#" id="popup-closer" class="ol-popup-closer"></a>
                <div id="popup-content"></div>
            </div>`);

            // 获取popup的dom对象
            var container = document.getElementById('popup');
            var content = document.getElementById('popup-content');
            var closer = document.getElementById('popup-closer');

            // 创建popup
            var popup = new ol.Overlay({
                element: container,
                autoPan: true,
                positioning: 'bottom-center',
                stopEvent: false,
                autoPanAnimation: {
                    duration: 250
                }
            });
            map.addOverlay(popup);
            // 关闭popup
            closer.onclick = function () {
                popup.setPosition(undefined);
                closer.blur();
                return false;
            };
            // 监听鼠标单击事件，点击feature后弹出popup
            map.on('click', function (e) {
                var coordinate = e.coordinate;
                var feature = map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
                    return feature;
                });
                if (feature) {
                    // 清空html
                    content.innerHTML = '';
                    var keys = Object.keys(feature.N);
                    for (let key of keys) {
                        console.log(key);
                    }
                    // 城市名称
                    var cityName = document.createElement('h2');
                    cityName.innerText = feature.get('cityName');
                    content.appendChild(cityName);

                    // 经度
                    var longitude = document.createElement('p');
                    longitude.innerText = '经度：' + feature.get('longitude');
                    content.appendChild(longitude);

                    // 纬度
                    var latitude = document.createElement('p');
                    latitude.innerText = '纬度：' + feature.get('latitude');
                    content.appendChild(latitude);

                    // 弹出popup
                    popup.setPosition(coordinate);
                }else {
                    popup.setPosition(undefined);
                    closer.blur();
                }
            });
        }
        // 创建地图
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 8
            })
        });
        popupOpen(map)

        // 监听鼠标移动事件，鼠标移动到feature区域时变为手形
        map.on('pointermove', function (e) {
            var pixel = map.getEventPixel(e.originalEvent);
            var hit = map.hasFeatureAtPixel(pixel);
            map.getTargetElement().style.cursor = hit ? 'pointer' : '';
        });

        // 构造数据
        function structureData(cityName,longitude,latitude){
            return {
                cityName: cityName,
                longitude: longitude,
                latitude: latitude
            }
        }
        // 创建数据源
        var source = new ol.source.Vector({
            wrapX: false
        });

        // 创建图层
        var layer = new ol.layer.Vector({
            source: source,
            style: new ol.style.Style({
                image: new ol.style.Icon({
                    src: 'images/point.png'
                })
            })
        });
        map.addLayer(layer);
        // 添加数据
        function addData(){
            var data = [];
            data.push(structureData('测试',121,31));
            data.push(structureData('测试',119,30));
            for (let datum of data) {
                var feature = new ol.Feature({
                    geometry: new ol.geom.Point([datum.longitude, datum.latitude]),
                    cityName: datum.cityName,
                    longitude: datum.longitude,
                    latitude: datum.latitude
                });
                source.addFeature(feature);
            }
        }
        addData()
    </script>
</body>
</html>